<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
  img{
      width: 30%;
      border: 5px solid white;
  }
</style>

<body>
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()">
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)">

    <script>
       /* onclick 当鼠标被单击时执行脚本
          ondblclick 当鼠标被双击时执行脚本
          onmouseout 当鼠标指针移出某元素时执行脚本
          onmouseover 当鼠标指针悬停于某元素之上时执行脚本  */
      function dan(){
          alert("点了一下！");
      }

      function shuang(){
          alert("连续点了两下！");
      }

      function shang(img){
          img.style.border = "5px solid red";
      }

      function xia(img){
          img.style.border = "5px solid white";
      }
     
    </script>
</body>
</html>